<template>
  <div class="page">
    <div class="weui-cells user_info">
      <div class="weui-cell">
        <div class="weui-cell__hd"><img :src="headerObj.id?headerObj.images:userInfo.avatar" mode="widthFix"></div>
        <div class="weui-cell__bd">{{headerObj.id?headerObj.grpName:userInfo.userName}}</div>
      </div>
    </div>
    <div class="weui-cells order">
      <div class="weui-cell">
        <div class="weui-cell__bd">消费项目</div>
      </div>
      <template v-if="cartData.length">
         <a class="weui-cell"  v-for="(item,index) in cartData">
          <div class="weui-cell__hd">
            <img class="order_pic" @click="goDetail(item)" :src="item.showPic" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{item.spName||item.productName}}</div>
              <div class="order_title_right">
                <div class="order_price">￥{{item.xsdj*0.01}}</div>
                <div class="order_number">x{{item.qty}}</div>
              </div>
            </div>
          </div>
        </a>
      </template>
      <template v-if="data.pgrpItems&&JSON.stringify(data.pgrpItems)!='{}'">
         <a class="weui-cell" >
          <div class="weui-cell__hd">
            <img class="order_pic" @click="goDetail(item)" :src="data.pgrpItems.picUrl" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="order_title weui-flex">
              <div class="order_title_left weui-flex__item">{{data.pgrpItems.itemName}}</div>
              <div class="order_title_right">
                <div class="order_price" v-if="isTuangou==1">￥{{data.pgrpItems.grpAmount*0.01}}</div>
                 <div class="order_price" v-if="isTuangou==0">￥{{data.pgrpItems.itemPrice*0.01}}</div>
                <div class="order_number">x{{data.pgrpItems.yxbj}}</div>
              </div>
            </div>
          </div>
        </a>
      </template>
      <template v-if="data.product&&JSON.stringify(data.product)!='{}'">
      <a class="weui-cell" >
        <div class="weui-cell__hd">
          <img class="order_pic" @click="goDetail(item)" :src="data.product.showPic" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="order_title weui-flex">
            <div class="order_title_left weui-flex__item">{{data.product.spName}}</div>
            <div class="order_title_right">
              <div class="order_price">￥{{data.product.xsdj*0.01}}</div>
              <div class="order_number">x{{data.product.yxbj}}</div>
            </div>
          </div>
        </div>
      </a>
      </template>
      <a class="weui-cell weui-cell_access" @click="getCouponList">
        <div class="weui-cell__bd">优惠券</div>
        <div class="weui-cell__ft"><span class="lightred">{{resultCoupon.ticketDef&&resultCoupon.ticketDef.ticketName}}</span></div>
      </a>
      <div class="weui-cell">
        <div class="order_bot">
          <div class="weui-flex">
            <div class="order_bot_left">总价：</div>
            <div class="weui-flex__item order_bot_right">
     <!--       {{data.product.lsdj*1||data.pgrpItems.grpAmount*1}} -->
     <template  v-if="data.pgrpItems&&JSON.stringify(data.pgrpItems)!='{}'">
     <span v-if="isTuangou==1">¥{{data.pgrpItems.grpAmount*data.pgrpItems.yxbj*0.01}}</span>
      <span v-if="isTuangou==0">¥{{data.pgrpItems.itemPrice*data.pgrpItems.yxbj*0.01}}</span>
     </template>
     <span  v-if=" data.product&&JSON.stringify(data.product)!='{}'">¥{{data.product.xsdj*0.01*data.product.yxbj}}</span>
       <span v-if="cartData.length">¥{{total}}</span>
            </div>
          </div>
          <div class="weui-flex">
            <div class="order_bot_left"></div>
            <div class="weui-flex__item order_bot_right">小计：
            <template v-if=" data.pgrpItems&&JSON.stringify(data.pgrpItems)!='{}'">
           <span v-if="isTuangou==1">¥{{data.pgrpItems.grpAmount*data.pgrpItems.yxbj*0.01}}</span>
            <span v-if="isTuangou==0">¥{{data.pgrpItems.itemPrice*data.pgrpItems.yxbj*0.01}}</span>
            </template>
            <span  v-if="data.product&&JSON.stringify(data.product)!='{}'">¥{{data.product.xsdj*0.01*data.product.yxbj}}</span>
              <span  v-if="cartData.length">¥{{total}}</span>
            <!-- <span>¥{{data.product.lsdj*1||data.pgrpItems.grpAmount*1}}</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer weui-flex">
      <div class="weui-flex__item">
        实付款：
        <template v-if=" data.pgrpItems&&JSON.stringify(data.pgrpItems)!='{}'">
        <span v-if="isTuangou==1" class="red">¥{{newPrice||data.pgrpItems.grpAmount*data.pgrpItems.yxbj*0.01}}</span>
         <span v-if="isTuangou==0" class="red">¥{{newPrice||data.pgrpItems.itemPrice*data.pgrpItems.yxbj*0.01}}</span>
         </template>

        <span class="red" v-if=" data.product&&JSON.stringify(data.product)!='{}'">¥{{newPrice||data.product.xsdj*0.01*data.product.yxbj}}</span>
          <span class="red" v-if="cartData.length">¥{{newPrice||total}}</span>
      </div>
      <a @click="payBox" class="footer_btn">确认支付</a>
    </div>
<!--    <CouponList ref="CouponList" @getCoupon="getCouponFun"></CouponList>-->
    <div v-if="showJs">
      <div class="weui-mask" @click="showJs=false"></div>
      <div class="weui-dialog dialog_bot">
        <div class="weui-dialog__hd dialog_bot_title">
          <span>选择优惠券</span>
          <div class="close" @click="showJs=false">×</div>
        </div>
        <div class="weui-dialog__bd weui-flex dialog_bot_con" style="display: flex;justify-content: space-between;flex-wrap: wrap;box-sizing: border-box;padding:20rpx;">
          <template v-if="list.length" >
<!--            <i-radio-group v-for="(item,index) in list" :key="index" :current="isClick" class="radio-group"   @change="handleFruitChange">-->
<!--              <i-radio :value="item.ticketDef.ticketName" position="right">-->
<!--              </i-radio>-->
<!--            </i-radio-group>-->


            <van-radio-group v-for="(item,index) in list" :key="index" :value="radio" style="width: 100%;margin-bottom: 30rpx;"  @change="handleFruitChange">
              <van-radio :name="item.ticketDef.id">{{item.ticketDef.ticketName}}</van-radio>
            </van-radio-group>
          </template>
          <template v-if="!list.length">
            <div style="width: 100%;text-align: center;">
              暂无优惠券
            </div>
          </template>
        </div>
        <div class="weui-dialog__ft dialog_bot_btn">
          <a  class="weui-dialog__btn weui-dialog__btn_primary" @click="bzCom" :disabled="!list.length">确认</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import * as appId from "@/utils/util"

export default {
  data () {
    return {
      userInfo:{},
      data:{},
      resultCoupon:{},//优惠券数据
      cartData:[],
      total:0,
      isTuangou:0,
      headerObj:{},
      newPrice:"",
      id:"",
      // 优惠券
      dataQuan:{},
      phone:"",
      isClick:"",
      showJs:false,
      userId:"",
      list:[],
      radio:false
    }
  },
  onUnload() {
     wx.removeStorageSync('productDetail')
     wx.removeStorageSync('cartData')
  },
  onLoad(options){
    if(options.id){
      this.headerObj=JSON.parse(options.id)
      this.id=this.headerObj.id;
    }else{
      this.headerObj={}
    }

  },
  components:{

  },

  onShow(){
    wx.setNavigationBarTitle({
      title: "提交订单"
    })
    this.showJs=false;
    this.isTuangou= wx.getStorageSync('isTuangou')
     this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
     this.data=wx.getStorageSync('productDetail')&&JSON.parse(wx.getStorageSync('productDetail'))
     this.cartData=wx.getStorageSync('cartData')&&JSON.parse(wx.getStorageSync('cartData'))

    if(this.userInfo) {
      this.phone=this.userInfo.mobileNo;
      this.userId=this.userInfo.baseUserId;
      //this. getList(0)
      // this.projectList();
      // this.getDetail()
    }
     if(this.cartData.length){
        this.getTotal(this.cartData)
     }

  },
  methods: {
    getNewPrice(price){

        this.$http.request({
          method: "post",
          url: "/v1.0/appletOperat/calculationPrice",
          body: {
            "appid":appId.appId,
            "userId":this.userId,
            "phone":this.phone,
            "productId":this.resultCoupon.id,
            "amounts":price
          }
        }).then((data)=>{
          if(data.code==0){
           this.newPrice=data.result;
          }
        })

    },
    // 优惠券
    handleFruitChange(val){
      this.radio=val.mp.detail;
    },
    init(data){
      this.showJs=true;
      this.dataQuan=data;
      this.getMyCouponList()
    },
    getMyCouponList(){
      let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletLogin/myCouponList",
        body: {
          "phone":this.dataQuan.mobileNo,
          "appid":appId.appId,
          "pageNo":"1",
          "pageSize":"999999",
          status:0
        }
      }).then((data)=>{
        if(data.code==0){
          this.list=data.result;
          this.isClick=this.list[0]&&this.list[0].id;
          console.log(this.list)
        }
      })
    },
    bzCom(){
      let arr=this.list.filter((item)=>{
        return item.id==this.isClick
      })
      //this.$emit('getCoupon',arr[0])
      this.getCouponFun(arr[0])
      let price=0;
      if(this.cartData.length){
        price=this.total

      }else{
        if(this.data.product&&JSON.stringify(this.data.product)!='{}'){
          price=this.data.product.xsdj&&this.data.product.xsdj*0.01*this.data.product.yxbj

        }else if(this.data.pgrpItems&&JSON.stringify(this.data.pgrpItems)!='{}'){
          price=this.data.pgrpItems.grpAmount;


        }
      }
      this.getNewPrice(price)
    },

    getTotal(data){
       this.total=0;
      data.forEach((a,i)=>{
        this.total+=a.qty*a.xsdj*0.01;
      })
    },
    goDetail(item){
      let url=`/pages/productdetail/main?id=${item.id}`;
      mpvue.navigateTo({ url })
    },
    payBox(){
      console.log(this.cartData)
       let objdata={};
       if(this.cartData.length){
        let  arr=[];
        this.cartData.forEach((a,i)=>{
          let obj={};
          obj.productId=a.spId||a.productId||a.id;
          if(a.spName){
             obj.carId=""
          }else{
            obj.carId=a.id

          }
          obj.price=this.newPrice||this.total;
          obj.nums=a.qty;
          arr.push(obj)
        })
       objdata={
          ticketInfoId:this.resultCoupon&&this.resultCoupon.id,
          price:this.newPrice||this.total,
          buyPro:arr
        }
      }else{
        if(this.data.product&&JSON.stringify(this.data.product)!='{}'){
          console.log(123)
             objdata={
           ticketInfoId:this.resultCoupon.id,
           // price:this.newPrice||this.data.product.xsdj&&this.data.product.xsdj*0.01*this.data.product.yxbj,
               price:0.01,
           buyPro:[{
             carId:"",
             productId:this.data.product.id,
             nums:this.data.product.yxbj
           }],
           }
        }else if(this.data.pgrpItems&&JSON.stringify(this.data.pgrpItems)!='{}'){
          let price=0;
          if(this.isTuangou==0){
            price=this.newPrice||this.data.pgrpItems.itemPrice;
          }else if(this.isTuangou==1){
             price=this.newPrice||this.data.pgrpItems.grpAmount;
          }
           objdata={
           ticketInfoId:this.resultCoupon.id,
           productId:this.data.marketingActivity.id,
           // price:price*0.01,
             price:0.01,
           buyPro:[{
             carId:"",
             productId:this.data.pgrpItems.id||this.data.pgrpItems.itemId,

             nums:this.data.pgrpItems.yxbj
           }]
           }

        }
      }
       wx.setStorageSync('payParams',JSON.stringify(objdata))
      wx.setStorageSync('groupId',this.id)
      let url=`/pages/pay/main`
       mpvue.navigateTo({ url })
    },
    getCouponList(){//打开优惠券
      // this.$refs.CouponList.init(this.userInfo);
       this.init(this.userInfo)
    },
    getCouponFun(val){
      this.resultCoupon=val;
      console.log(val)
      this.showJs=false;
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .getTIme .radio-group{
    width: 100%;
  }
  .dialog_bot_con{
    text-align: left;
    padding: 0px;
  }
  .dialog_bot_btn .weui-dialog__btn_primary{
    margin: 0.6em 2em;
    background: #FF787E;
    border-radius: 1.2em;
    color: #fff;
    height: 2.4em;
  }
  .date{
    background: #f8f8f8;
    width: 8em;
    color: #333;
    font-size: 1em;
  }
  .dialog_bot_title{
    height: 2.6em;
    line-height: 2.6em;
    border-bottom: 1px #eee solid;
    padding: 0.5em;
    text-align: left;
    display: flex;
    justify-content: space-between;
  }
  .dialog_bot{
    min-width: 100%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: auto;
    z-index: 999999;
    -webkit-transform:translate(0%,0%);
    transform:translate(0%,0%);
  }
  .time{
    padding: 0.6em;
  }
  .time .current{
    color: #FF787E;
  }
  .date ul li.current{
    background: #fff;
  }
  .date ul li{
    height: 2.4em;
    line-height: 2.4em;
    text-align: center;
  }
  .date ul li.current{
    background: #fff;
  }
.page{
  padding-bottom: 3.5em;
}
.user_info{
  margin-top: 0px!important;
}
.user_info img{
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  margin-right:0.5em;
}
.footer{
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  right: 0px;
  background: #fff;
  border-top: 1px #eee solid;
}
.footer .weui-flex__item{
  padding: 0 0.6em;
  font-size: 0.8em;
  line-height: 2.4em;
}
.footer .footer_btn{
  width: 6em;
  height: 2.4em;
  line-height: 2.4em;
  color: #fff;
  text-align: center;
  background: #FF787E;
}
.order .order_pic{
  width: 5em;
  height: 5em;
  margin-right: 0.6em;
  border-radius: 0.3em;
  margin-top: 0.2em;
}
.order .weui-cell:before{
  display: none;
}
.order .weui-cell{
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
  align-items: inherit;
}
.order .weui-cell:last-child{
  padding-top: 0.2em;
}
.order_title .order_title_left{
  font-size: 0.9em;
}
.order_title_right{
  font-size: 0.8em;
  text-align: right;
  color: #999;
  margin-left: 0.4em;
}
.order_title_right .order_price{
  color: #FF787E;
}
.order_other{
  font-size: 0.8em;
  color: #666;
  margin-top: 0.3em;
}
.order_bot{
  width: 100%;
}
.order_bot .order_bot_left{
  color: #999;
  font-size: 0.8em;
  width: 6em;
}
.order_bot .order_bot_right{
  color: #333;
  font-size: 0.9em;
  text-align: right;
}
.order_bot .order_bot_right span{
  color: #FF787E;
}
</style>
